<template>
  <view class="time-list">
    <view
        v-for="item in sceneTimeList"
        :key="item.key"
        class="item"
        @click="editTimeScene(item)"
        @longpress="openMoreAction(item)">
      <view class="name">{{ item.name }}</view>
      <view class="type">时控类型: {{ item.sceneTypeText }}</view>
    </view>

    <view v-if="canEdit" class="page-bottom-btn" @click="addTimeScene()">新增时控</view>
    <uni-popup ref="popup" type="bottom">
      <view class="delete-btn" @click="deleteTimeScene()">删除时控</view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: 'time-setting',
  props: {
    projectInfo: {
      type: Object
    },
    sceneTimeList: {
      type: Array
    }
  },
  computed: {
    canEdit() {
      return this.projectInfo.canEdit
    }
  },
  data() {
    return {
      target: null
    }
  },
  methods: {
    initData() {},
    addTimeScene() {
      if (!this.canEdit) return
      uni.navigateTo({
        url: `/pages/settings/add-time-scene/add-time-scene?projectId=${this.projectInfo.id}&canEdit=true`
      })
    },
    editTimeScene(target) {
      uni.navigateTo({
        url: `/pages/settings/add-time-scene/add-time-scene?projectId=${this.projectInfo.id}&id=${target.id}&canEdit=${this.canEdit}`
      })
    },
    deleteTimeScene() {
      const self = this
      if (!self.target) return
      this.$refs.popup.close()
      uni.request({
        url: '/project_scene/del',
        data: {
          id: self.target.id
        },
        success(result) {
          if (result.data.success) {
            self.$emit('refreshScene')
            uni.showToast({
              icon: 'success',
              title: '删除成功'
            })
          }
        }
      })
    },
    openMoreAction(target) {
      if (!this.canEdit) return
      this.target = target
      this.$refs.popup.open()
    },
  }
}
</script>

<style scoped lang="scss">
.time-list {
}
.item {
  background-color: $white;
  border-radius: 10rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.name {
  font-size: $font-size-4;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.type {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: $font-size-2;
  color: $text-secondary;
}
.delete-btn {
  background-color: $danger;
  color: $white;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: $font-size-4;
}
</style>
